/*
	列表用样式
*/

.lightbox{
	width:100%;height:100%;
	top: 0;
	left: 0;
	position: fixed;
	background-color: rgba(0,0,0,.5);
	@zindex : 999999;
	z-index:@zindex;
	transition: opacity 500ms ease;
	.public(){
		cursor: pointer;
		position: absolute;
		z-index: @zindex + 2;
		opacity: .5;
		&:hover{
			opacity: 1;
		}
		
	}
	.closeAction{
		width:32px;
		height:32px;
		right: 0;
		top: 0;
		.public;
		//.lightBox_closeBtn;
	}
	.nextItemAction  {
		width:100px;
		height:100px;
		right: 5px;
		top: 45%;
		.public;
		//.lightBox_right;
	}
	.pervItemAction{
		width:100px;
		height:100px;
		left: 5px;
		top: 45%;
		.public;
		//.lightBox_left;
	}
	&>ul{
		height: 100%;
		z-index: @zindex + 1;
	}
	&>ul>li{
		height: 100%;
		position: relative;
		&>img{
			position:absolute;
			top:0;
			bottom:0;
			left:0;
			right:0;
			margin:auto;
			max-width: 95%;
			max-height: 90%;
			//.boxshadow(3px, 3px, 3px, rgba(0, 0, 0, .4));
		}
	}
}
.lightbox_Container{
	.CarouselContainer;
	.lightbox;
}


// 全屏幕的跑马灯图片展示器
.fullScreenCarousel{
	.x_carouselContainer;
	width:100%;
	top: 0;
	left: 0;
	position: fixed;
	.x_carouselMover{
		.x_carouselItem{
			display: table-cell; 				// 为实现居中，采用 单元格布局
			text-align: center;					// 水平居中
			position: relative;
			
			img {
				max-width: 95%;
				max-height: 90%;
				vertical-align: middle;			// 垂直居中
			}
			header{
				position: absolute;
				top: 0;
				right:  0;
				color:white;
				height: 20px;
				line-height: 20px;
				width:100%;
				text-align: left;
				text-indent: .5em;
				padding-bottom: 0px;
				padding-right: 3px;
				padding-top: 3px;
				border-top: 1px solid #111;
				background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));

				div{
					float: right;
					span{
						//color:@baseColor;
					}
				}
			}

			footer {
				position: absolute;
				bottom: 0;
				left: 0;
				text-align: left;	
				color:white;
				
				line-height: 20px;
				width:100%;
				
				font-size: .9em;
				border-top: 1px solid black;
				background-color: rgba(0,0,0,.5);
				div{
					border-top: 1px solid #333;
					padding: 4px;
					padding-bottom: 0;
					padding-right: 2px;
				}
				a{
					float: right;
					//color:@baseColor;
				}
			}

		}				
	}
}

// 图文单列
.column_1(){
    /*
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
  	
  	flex-flow: row wrap;
  	
    -webkit-flex-direction: row;
    flex-direction: row;
    
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    */
	li{
		/*
	 	-webkit-box-flex: 1 1 33%;
	    -webkit-flex: 1 1 33%;
	    -ms-flex: 1 1 33%;
	    flex: 1 1 33%;*/
	    
	    clear: both;// 如不设置该项，li 渲染有可能会不换行
		border-bottom: 1px solid lightgray; // 默认分割线
		padding: 2% 0; // 适当的间距
		margin: 0 2%;
		overflow: hidden; // 清除浮动
		list-style-type:none;
		a{
			display:block; // 可以使触控区域变大
			text-decoration:none;
			color: #2badea;
		}
	}
	.imgHolder{ // 图片居左显示
		float:left; // 使用浮动居左
		width:30%; // 宽度
	}

	h4{ // 标题样式
		margin:0;
//		margin-bottom:5px;
		font-size: 1.05rem;
		line-height: 120%;
		white-space: normal; // 允许换行
		letter-spacing: 2px;
		&:hover{
			//color:@mainColor; // 高亮颜色
		}
	}
	h4, p{
		margin-left:32%; // 按照前面图片宽度适当加 2% 30% + 2%
		font-weight:normal;// 取消默认加粗
	}
	p{
		font-size: .9rem;
		color:gray;
		margin-bottom: 0;
	}
	.date{
		text-align:right;
		color:gray;
	}
}

// 双列、三列两者公共基类，不能直接使用，应要被 mixin
.column_2_3_base(){
	clear:both;
	overflow: hidden;
	margin-top:5px;
	li{
		float:left;
		
		a{
			text-decoration:none;
		}
		
		.box{
		}
		h4{ // 图片标题文字
			font-weight:normal;
			font-size:1rem;
			padding:5px 0;
			letter-spacing:2px;
			color:#2badea;
		}
	}
}

.column_2{
	.column_2_3_base();
	li{
		width:48%;
	 	&:nth-of-type(odd){ // 用 css 完成 实在不行，可以用js计算完成
	 		margin-left:1.3%; 
	 		margin-right:1.3%; 
	 	} 
	 	&:nth-of-type(even){ 
	 		margin-right:1.4%; 
	 	} 
	}
}

.column_3(){
	.column_2_3_base();
	padding-left:1%;
	li{
		width:33.3%;
		.box{
			width:98%;
		}
	}
}

 
// 图片容器
.imgHolder{
	position: relative;
	overflow: hidden;
	min-height: 70px; // 最小高度，不限最大高度，由图片决定
	// 背景图
	background: no-repeat center top url('');
	background-size: 110% 80%;
	img{
		width:100%;
//		.imgOpacityShow;
//		.fixTransitionFlash;
		opacity:0;
		&.tran{
			opacity:1;
		}
	}
	.icon{
		position:absolute;
		opacity: .7;
		bottom:6px;
		right:2px;
		border-radius: 4px;
		margin-right:3px;
		margin-left:1px;
		width:32px;
		height:32px;
	}
}

// 加载图片失败时
.noImg {
	//background: no-repeat center url(…GW4HJd154/wLO3AA/wAA/wAA/wAA/wAA/wAA/wCuuHAAMAaNQ5XJEBFDQAAAAASUVORK5CYII=);
}
